<template>
	<view class="content">
		<view class="card_top">


			<view class="name">
				{{data.courses.title}}
			</view>

			<view class="time">
				<view class="">
					<text style="margin-right: 15upx;">上课时间：{{data.courses.time_a}} -
						{{data.courses.time_b}}</text><span
						style="margin-left: 10upx;">{{data.courses.time_s}}-{{data.courses.time_s_en}}</span>
				</view>
				<text style="margin: 0 5upx;" v-for="(item ,index) in data.courses.time_en">{{item}}</text>
			</view>

			<view class="type">
				<view class="typeItem">
					<image src="/static/age.png" mode=""></image> <text>学龄阶段</text>
					<text>{{data.courses.school_title}}</text>
				</view>
				<view class="typeItem">
					<image src="/static/stage.png" mode=""></image> <text>适用阶段</text>
					<text>{{data.courses.applicable}}</text>
				</view>
				<view class="typeItem">
					<image src="/static/hour.png" mode=""></image> <text>总课时数</text>
					<text>{{data.courses.period_num}}</text>
				</view>
				<view class="typeItem">
					<image src="/static/class.png" mode=""></image> <text>班级类型</text>
					<text>{{data.courses.pattern}}</text>
				</view>
			</view>
		</view>



		<view class="money">
			<view class="moneyItem">
				<text>应付款</text>
				<text>￥{{data.order.price_sum}}</text>
			</view>
			<!-- 		<view class="moneyItem" v-if="type!=1">
			<text>砍价</text>
			<text>￥{{data.order.price_b}}</text>
		</view> -->
			<view class="moneyItem" style="border-bottom: 1upx solid rgb(247,247,247);">
				<text>积分抵扣</text>
				<text>（{{integral}}积分）￥{{data.order.price_en}}</text>
			</view>
			<view class="closeMoney">
				合计：<text>￥{{data.order.price_pay}}</text>
			</view>
		</view>

		<view class="card">
			<view class="title">
				参与拼团
			</view>
			<view class="group">
				<view class="groupItem" v-for="(item ,index) in data.round_list">
					<image :src="item.user.pic" mode=""></image>
				</view>
			</view>

		</view>



		<u-toast ref="uToast" />
		<button open-type="share" class="btn">邀请好友</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				data: {},
				order_id: '',
				integral: '',
				integralMoney: ''
			}
		},
		onLoad(e) {
			console.log(e)
			this.order_id = e.order_id





			this.newData()
			this.$myRuquest('home/user/user').then(res => {
				if (res.code == 400) {
					this.integral = res.data.integral

				}
			})

		},
		methods: {
			newData() {
				let location = uni.getStorageSync('location');
				let data = {
					order_id: this.order_id,
					longitude: location.lng,
					latitude: location.lat
				}
				this.$myRuquest('home/user/order_details', data).then(res => {
					if (res.code == 400) {
						this.data = res.data
						this.data.courses.time_b = this.$u.timeFormat(this.data.courses.time_b, 'yyyy-mm-dd');
						this.data.courses.time_a = this.$u.timeFormat(this.data.courses.time_a, 'yyyy-mm-dd');
						this.$myRuquest('home/user/baby_list', {
							baby_id: this.data.order.baby_id
						}).then(res => {
							if (res.code == 400) {
								this.babyList = res.data
							}
						})
					}
				})
			},
			onShareAppMessage() {
				console.log(this.data.courses.id)
				return {
					title: '***********',
					path: '/pages/organizationDetails/foundOrder/foundOrder?courId=' + this.data.courses.id +
						'&round_id=' + this.data.order.id+'&type=2'
				}
			}
		}
	}
</script>

<style lang="less">
	.content {
		background-color: rgb(247,247,247);
		padding: 20upx;
		min-height: 100vh;
	}

	.card_top {
		background-color: #fff;
		padding: 20upx;
		border-radius: 12upx;
		// border-bottom: 1upx solid rgb(247,247,247);

		.icon {
			flex: 2;
			display: flex;
			text-align: right;

			view {
				flex: 1;
			}
		}

		.name {
			font-size: 38upx;
			font-weight: 900;
			margin-left: 20upx;
		}


		.time {
			font-size: 20upx;
			color: #5b5b5b;
			margin-left: 20upx;
		}

		.type {
			display: flex;
			flex-wrap: wrap;
			width: 100%;
			padding-left: 10upx;

			.typeItem {
				width: 48%;
				margin: 10upx 1%;
				display: flex;
				font-size: 26upx;

				image {
					width: 20upx;
					height: 20upx;
					margin: auto 0;
				}

				text:nth-child(2) {
					margin: 0 15upx;
					color: #757575;
				}
			}
		}

	}

	.money {
		background-color: #fff;
		border-radius: 12upx;
		padding: 20upx;
		margin: 20upx 0;

		.moneyItem {
			display: flex;
			font-size: 26upx;
			padding: 20upx 0;

			text {
				flex: 1;
			}

			text:nth-child(2) {
				text-align: right;
			}
		}

		.closeMoney {
			text-align: right;

			text {
				color: red;
			}
		}
	}

	.card {
		background-color: #fff;
		padding: 20upx;
		border-radius: 12upx;

		.group {
			display: flex;
			margin-top: 10upx;

			.groupItem {
				width: 100upx;
				height: 100upx;
				margin: 0 10upx;

				image {
					width: 100%;
					height: 100%;
					border-radius: 50%;
					border: 4upx solid rgb(247,247,247);
				}
			}
		}
	}


	.activeBaby {
		background-color: rgba(254, 189, 140, .5);
		box-shadow: 0 0 5upx rgba(0, 0, 0, .2);
		border-radius: 12upx;
	}

	.btn {
		width: 500upx;
		height: 80upx;
		line-height: 80upx;
		text-align: center;
		margin: 100upx auto;
		border-radius: 12upx;
		color: #fff;
		background: linear-gradient(to right, rgb(254, 189, 140), rgb(254, 28, 77));
	}
</style>
